import React, { useState, useEffect } from 'react';
import SelfHead from 'components/common/selfHead';
import { List, Toast } from 'antd-mobile';
import Cascade from 'components/common/cascade';
import SelfInput from 'components/common/selfInput';
import storage from 'dic/storage';
import { getSite, addStorage } from 'ser/actions';
import { history } from 'umi';
import './index.less';

export default function Add() {
  const user = JSON.parse(sessionStorage.getItem('user'));
  const [obj, setObj] = useState({
    storehouseProperty: '',
    storehouseType: '',
    city: '',
    area: '',
    companyName: user.companyName,
    linkman: '',
    linkphone: '',
    status: 1,
    remark: null,
    lease: '',
  });
  const [type, setType] = useState(storage.type);
  // 一级省份数据
  const [province, setProvince] = useState([]);
  // 所有地点数据
  const [site, setSite] = useState([]);
  const [flag, setFlag] = useState(false);
  useEffect(() => {
    async function fetchData() {
      const stair = await getSite({ areaCode: 0 });
      if (stair.code === 0) {
        setSite([
          {
            value: '',
            label: '请选择',
          },
          ...stair.rows,
        ]);
        setProvince([
          {
            value: '',
            label: '请选择',
          },
          ...stair.rows,
        ]);
      }
    }
    fetchData();
  }, []);
  function handleOnChange(v, label) {
    switch (label) {
      case '仓储性质':
        setObj({
          ...obj,
          storehouseProperty: v[0],
        });
        setType(storage.type.filter(item => item.pLabel === v[0]));
        break;
      case '仓储类型':
        setObj({
          ...obj,
          storehouseType: v[0],
        });
        break;
      case '需求城市':
        setObj({
          ...obj,
          city: v.length > 0 ? v.join(',') : '',
        });
        break;
      case '租期':
        setObj({
          ...obj,
          lease: v[0],
        });
        break;
    }
  }
  async function handleOnPickerChange(val) {
    if (val.length === 1 && val[0] !== '') {
      const secound = await getSite({ areaCode: val[0] });
      if (secound.code === 0) {
        let arr = province.map(item => {
          if (item.value === val[0]) {
            item.children = [
              {
                value: '',
                label: '请选择',
              },
              ...secound.rows,
            ];
          }
          return item;
        });
        setSite(arr);
      }
    }
    if (val.length === 2 && val[1] !== '') {
      const three = await getSite({ areaCode: val[1] });
      if (three.code === 0) {
        let arr = site.map(item => {
          if (item.value === val[0]) {
            item.children.map(ite => {
              if (ite.value === val[1]) {
                ite.children = [
                  {
                    value: '',
                    label: '请选择',
                  },
                  ...three.rows,
                ];
              }
              return ite;
            });
          }
          return item;
        });
        setSite(arr);
      }
    }
  }
  function handleInputChange(v, label) {
    switch (label) {
      case '需求面积':
        setObj({
          ...obj,
          area: v,
        });
        break;
      case '备注':
        setObj({
          ...obj,
          remark: v,
        });
        break;
      case '企业名称':
        setObj({
          ...obj,
          companyName: v,
        });
        break;
      case '联系人':
        setObj({
          ...obj,
          linkman: v,
        });
        break;
      case '联系电话':
        setObj({
          ...obj,
          linkphone: v,
        });
        break;
    }
  }
  async function handleSubmit() {
    if (flag) {
      Toast.info('不可重复提交', 1);
      return;
    }
    if (Object.values(obj).some(item => item === '')) {
      Toast.info('请填写完整信息', 1);
      return;
    }
    setFlag(true);
    const res = await addStorage({ ...obj });
    if (res.code === 0) {
      Toast.success(res.msg, 1, () => {
        history.push('/');
      });
    } else {
      setFlag(false);
    }
  }
  return (
    <div className="storage-add">
      <SelfHead title="仓储需求发布" />
      <div className="storage-add-body">
        <List className="self-list">
          <Cascade
            label="仓储性质"
            title="请选择仓储性质"
            cols={1}
            data={storage.prop}
            handleOnChange={handleOnChange}
          />
          <Cascade
            label="仓储类型"
            title="请选择仓储类型"
            cols={1}
            data={type}
            handleOnChange={handleOnChange}
          />
          <Cascade
            label="需求城市"
            title="请选择需求城市"
            cols={3}
            data={site}
            handleOnPickerChange={handleOnPickerChange}
            handleOnChange={handleOnChange}
          />
          <SelfInput
            label="需求面积"
            unit="平方米"
            handleInputChange={handleInputChange}
            rule={{
              len: 1,
              empty: '请输入需求面积',
              error: '请正确输入需求面积',
              reg: /^(0|[1-9][0-9]*)(\.\d+)?$/,
            }}
            type="digit"
          />
          <Cascade
            label="租期"
            title="请选择租期"
            cols={1}
            data={storage.lease}
            handleOnChange={handleOnChange}
          />
          <SelfInput
            label="备注"
            isRequired={false}
            handleInputChange={handleInputChange}
            rule={{
              len: 0,
              empty: '',
              error: '',
            }}
          />
          <SelfInput
            label="企业名称"
            handleInputChange={handleInputChange}
            rule={{
              len: 2,
              empty: '请输入企业名称',
              error: '请正确输入企业名称',
            }}
            defaultValue={obj.companyName}
            disabled={true}
          />
          <SelfInput
            label="联系人"
            handleInputChange={handleInputChange}
            rule={{
              len: 2,
              empty: '请输入联系人',
              error: '请正确输入联系人',
            }}
          />
          <SelfInput
            label="联系电话"
            handleInputChange={handleInputChange}
            rule={{
              len: 5,
              empty: '请输入联系电话',
              error: '请正确输入联系电话',
            }}
          />
        </List>
      </div>
      <div className="storage-add-btn" onClick={handleSubmit}>
        发布
      </div>
    </div>
  );
}
